<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  duration: {
    type: Number,
    default: 2500 // 默认动画持续2.5秒
  },
  onFinish: {
    type: Function,
    default: () => {}
  }
})

const logoScale = ref(0.5)
const logoOpacity = ref(0)
const titleOpacity = ref(0)
const subtitleOpacity = ref(0)
const containerOpacity = ref(1)

onMounted(() => {
  // 启动动画序列
  setTimeout(() => {
    logoOpacity.value = 1
    logoScale.value = 1
  }, 100)
  
  setTimeout(() => {
    titleOpacity.value = 1
  }, 600)
  
  setTimeout(() => {
    subtitleOpacity.value = 1
  }, 1000)
  
  // 动画结束后淡出并调用完成回调
  setTimeout(() => {
    containerOpacity.value = 0
    setTimeout(() => {
      props.onFinish()
    }, 500) // 等待淡出动画完成
  }, props.duration)
})
</script>

<template>
  <view 
    class="splash-container" 
    :style="{ opacity: containerOpacity }"
  >
    <view class="splash-content">
      <image 
        class="logo" 
        src="/static/logo.svg" 
        mode="aspectFit"
        :style="{ 
          transform: `scale(${logoScale})`, 
          opacity: logoOpacity 
        }"
      />
      <view class="text-container">
        <text 
          class="title" 
          :style="{ opacity: titleOpacity }"
        >知录我&健康</text>
        <text 
          class="subtitle" 
          :style="{ opacity: subtitleOpacity }"
        >中医健康管家</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.splash-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 240rpx;
  height: 240rpx;
  margin-bottom: 40rpx;
  transition: all 0.8s ease;
}

.text-container {
  text-align: center;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  transition: opacity 0.8s ease;
  display: block;
}

.subtitle {
  font-size: 32rpx;
  color: #666;
  transition: opacity 0.8s ease;
  display: block;
}
</style>